<template>
    <Form ref="form" :formData="formData" />
    <button class="btn-login" @click="submit">登录</button>
</template>

<script>
import { defineComponent, ref, reactive, toRefs } from 'vue'
import Form from '@/components/Form'

export default defineComponent({
    name: 'Login',
    components: { Form },
    setup() {
        const data = reactive({
            formData: {
                oneLabel: '账号',
                twoLabel: '密码',
                oneInput: '请输入账号',
                twoInput: '请输入密码',
                username: '',
                password: '',
                type: 'text',
                color: '#068878'
            }
        })
        const form = ref(null)
        const submit = () => {
            console.log(form.value)
            form.value.chekAllValue('login')
        }
        return {
            ...toRefs(data),
            form,
            submit
        }
    }
})
</script>

<style scoped lang="scss">
.btn-login {
    width: 100%;
    height: 40px;
    margin-top: 10px;
    color: white;
    text-align: center;
    background-color: #068878;
    border: none;
    border-radius: 20px;
    outline: none;
}
</style>
